<template>
  <div>
    <h1>mapState:</h1><hr/>
      <h3>num: {{ num }}</h3> <el-button  @click="add(10)">+</el-button>
      <h3>name: {{ name }}</h3>
      <h3>test:{{ test }}</h3>

    <h1>mapGetters:</h1><hr/>
      <h3>{{ student }}</h3>
        <el-button  @click="setAge">setAge</el-button>
        <el-button  @click="addAge(10)">addAge</el-button>
      <h3>{{ doneTodos }}</h3>

    <h1>Action:</h1><hr/>
    <el-button  @click="act(100)">NUM++</el-button>

  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  data() {
    return {
    };
  },
  computed: { 
    ...mapState({
      num: state=>state.demo.num,
      name: state=>state.demo.name,
      test:'test'
    }),
    // num() {
    //   return this.$store.state.demo.num;
    // },
    //  name() {
    //   return this.$store.state.demo.name;
    // },

    ...mapGetters([
      'student',
      'doneTodos'
    ])
    // student() {
    //   return this.$store.getters.student;
    // }

  },
  created() {
    console.info(this.$store);
  },
  methods:{
    ...mapMutations([
      'add',
      'setAge',
      'addAge'
    ]),
    
    // add(){
    //   this.$store.commit('add',10)
    // },
    // setAge(){
    //   this.$store.commit('setAge')
    // },
    // addAge(){
    //   this.$store.commit('addAge')
    // }

    act(num){
      this.$store.dispatch('uu', num)
    }
  }
};
</script>

<style>
</style>
